<template>
  <div class="member-tutorial">
    <div class="tutorial-header">
      <h1>使用教程</h1>
      <p class="subtitle">快速上手，充分利用平台的各项功能</p>
    </div>

    <div class="tutorial-content">
      <div class="tutorial-nav">
        <div class="nav-item" 
             v-for="section in tutorialSections" 
             :key="section.id"
             :class="{ active: activeSection === section.id }"
             @click="setActiveSection(section.id)">
          <component :is="section.icon" :size="20" />
          <span>{{ section.title }}</span>
        </div>
      </div>

      <div class="tutorial-main">
        <div v-for="section in tutorialSections" 
             :key="section.id"
             v-show="activeSection === section.id"
             class="tutorial-section">
          <h2>{{ section.title }}</h2>
          <div class="steps">
            <div v-for="(step, index) in section.steps" 
                 :key="index"
                 class="step-item">
              <div class="step-number">{{ index + 1 }}</div>
              <div class="step-content">
                <h3>{{ step.title }}</h3>
                <p>{{ step.description }}</p>
                <div v-if="step.image" class="step-image">
                  <img :src="step.image" :alt="step.title">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  IconUser,
  IconBook,
  IconCalendarClock,
  IconSettings,
  IconMessage,
  IconTrophy
} from '@arco-design/web-vue/es/icon'

const activeSection = ref('getting-started')

const tutorialSections = [
  {
    id: 'getting-started',
    title: '快速开始',
    icon: IconUser,
    steps: [
      {
        title: '注册登录',
        description: '使用邮箱注册账号，完成邮箱验证后即可登录使用。',
      },
      {
        title: '完善个人信息',
        description: '点击右上角头像，完善个人资料，包括昵称、头像等信息。',
      },
      {
        title: '浏览课程',
        description: '在课程中心浏览感兴趣的课程，查看课程详情和评价。',
      }
    ]
  },
  {
    id: 'course-learning',
    title: '课程学习',
    icon: IconBook,
    steps: [
      {
        title: '选择课程',
        description: '在课程中心选择适合自己的课程，可以按分类、难度筛选。',
      },
      {
        title: '开始学习',
        description: '点击课程进入学习页面，按照章节顺序学习课程内容。',
      },
      {
        title: '完成练习',
        description: '每个章节后会有相应的练习题，完成练习巩固所学知识。',
      },
      {
        title: '查看进度',
        description: '在个人中心可以查看学习进度，了解掌握情况。',
      }
    ]
  },
  {
    id: 'member-features',
    title: '会员功能',
    icon: IconCalendarClock,
    steps: [
      {
        title: '功能卡片',
        description: '会员中心提供多种功能卡片，包括周计划、学习进度等。',
      },
      {
        title: '周计划管理',
        description: '点击周计划卡片，可以查看和制定每周的学习计划。',
      },
      {
        title: '学习统计',
        description: '查看详细的学习统计数据，了解学习效果。',
      }
    ]
  },
  {
    id: 'settings',
    title: '个性化设置',
    icon: IconSettings,
    steps: [
      {
        title: '主题设置',
        description: '可以切换明暗主题，选择适合的界面风格。',
      },
      {
        title: '通知设置',
        description: '设置学习提醒、课程更新等通知偏好。',
      },
      {
        title: '隐私设置',
        description: '管理个人信息的可见性和隐私权限。',
      }
    ]
  }
]

const setActiveSection = (sectionId) => {
  activeSection.value = sectionId
}
</script>

<style lang="less" scoped>
.member-tutorial {
  height: 100%;
  display: flex;
  flex-direction: column;

  .tutorial-header {
    padding: 24px;
    text-align: center;
    background: white;
    border-bottom: 1px solid var(--color-border-2);
    
    h1 {
      margin: 0 0 8px 0;
      font-size: 28px;
      font-weight: 600;
      color: var(--color-text-1);
    }
    
    .subtitle {
      margin: 0;
      font-size: 16px;
      color: var(--color-text-3);
    }
  }

  .tutorial-content {
    flex: 1;
    display: flex;
    height: calc(100vh - 200px);
    
    .tutorial-nav {
      width: 240px;
      background: white;
      border-right: 1px solid var(--color-border-2);
      padding: 20px 0;
      
      .nav-item {
        display: flex;
        align-items: center;
        padding: 12px 20px;
        cursor: pointer;
        transition: all 0.2s ease;
        
        &:hover {
          background: var(--color-fill-2);
        }
        
        &.active {
          background: var(--color-primary-light-1);
          color: var(--color-primary);
          border-right: 3px solid var(--color-primary);
        }
        
        .arco-icon {
          margin-right: 12px;
        }
        
        span {
          font-size: 14px;
          font-weight: 500;
        }
      }
    }
    
    .tutorial-main {
      flex: 1;
      padding: 24px;
      overflow-y: auto;
      background: var(--color-bg-1);
      
      .tutorial-section {
        max-width: 800px;
        margin: 0 auto;
        
        h2 {
          margin: 0 0 24px 0;
          font-size: 24px;
          font-weight: 600;
          color: var(--color-text-1);
        }
        
        .steps {
          .step-item {
            display: flex;
            margin-bottom: 32px;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            
            .step-number {
              flex-shrink: 0;
              width: 32px;
              height: 32px;
              border-radius: 50%;
              background: var(--color-primary);
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: bold;
              margin-right: 16px;
              margin-top: 4px;
            }
            
            .step-content {
              flex: 1;
              
              h3 {
                margin: 0 0 8px 0;
                font-size: 18px;
                font-weight: 600;
                color: var(--color-text-1);
              }
              
              p {
                margin: 0 0 16px 0;
                line-height: 1.6;
                color: var(--color-text-2);
              }
              
              .step-image {
                margin-top: 12px;
                
                img {
                  max-width: 100%;
                  border-radius: 8px;
                  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>